<template>
  <div class="input" ref="inputDom">
    <template v-if="transition">
      <i :class="[iptCls, 'transition-icon']" v-show="!isShowInput"></i>
      <collapase-transition>
        <div class="transition-input" v-show="isShowInput">
          <input type="text" v-bind="$attrs" v-model="newValue" />
        </div>
      </collapase-transition>
    </template>
    <template v-else>
      <i :class="[iptCls, 'not-transition-icon']"></i>
      <input type="text" />
    </template>
  </div>
</template>

<script>
import CollapaseTransition from '../utils/collapase-transition'
export default {
  name: 'Input',
  props: {
    icon: {
      type: String,
      default: () => ''
    },
    transition: {
      type: Boolean,
      default: () => false
    }
  },
  components: {
    CollapaseTransition
  },
  data() {
    return {
      isShowInput: false
    }
  },
  methods: {
    handleClick(e) {
      if (this.$refs['inputDom'].contains(e.target)) {
        this.isShowInput = true
      } else {
        this.isShowInput = false
      }
    }
  },
  mounted() {
    document.addEventListener('click', this.handleClick)
  },
  destroyed() {
    document.removeEventListener('click', this.handleClick)
  },
  computed: {
    iptCls: function() {
      return [
        'iconfont',
        {
          [`icon-${this.icon}`]: this.icon
        }
      ]
    },
    newValue: {
      get: function() {
        return this.value
      },
      set: function(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>
